<template>
  <div>
 
   <div style="margin-bottom: 5px;">
    <div>
      <el-input v-model="roleId" suffix-icon="el-icon-search" placeholder="请输入角色ID" style="width: 200px;" @keyup.enter.native="queryData"></el-input>
      <el-button  type="primary" style="margin-left: 10px;" @click="queryData">搜索</el-button>
      <el-button type="info" @click="reset" plain>重置</el-button>
    </div>
 
     <el-button  type="primary" style="margin: 10px;" @click="add" plain>新增</el-button>
   </div>
 
   <el-table :data="tableData"
     :header-cell-style="{background:'#f2f5fc',color: '#555555',textAlign:'center'}"
     border
     @selection-change="handleSelectionChange"
     :row-key="getRowKeyOfTarget"
     :cell-style="{textAlign:'center'}"
     style="overflow-y: auto;height: calc(100vh - 152px);"
   >

         <!-- 选框 -->
         <el-table-column 
          type="selection" 
          width="40"
          :reserve-selection="true" 
        ></el-table-column>

         <el-table-column prop="rwId" label="ID" width="60">
         </el-table-column>
 
         <el-table-column prop="roleId" label="角色ID" width="">
         </el-table-column>
 

         <el-table-column prop="warehouseId" label="仓库ID" width="120">
         </el-table-column>
 
         <el-table-column prop="warehouseName" label="仓库名" >
         </el-table-column>
 
         <el-table-column prop="requestProcessing" label="仓库审批权限" >
         </el-table-column>

         <el-table-column prop="operate" label="操作" width="180">
 
           <template slot-scope="scope">

            <div class="action-buttons">
            <span class="edit-link" @click="mod(scope.row)">
              <i class="el-icon-edit"></i> 编辑
            </span>

            <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row.roleId)" style="margin-left: 5px;">
             <template #reference>
              <span class="delete-link">
              <i class="el-icon-delete"></i> 删除
            </span>
             </template>
           </el-popconfirm>
          </div>

          </template>
         
 
         </el-table-column>
       </el-table>
 
    <!-- 新增和修改 -->
     <el-dialog
       title="提示"
       :visible.sync="centerDialogVisible"
       :before-close="handleClose"
       center>
       <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        
         <el-form-item label="ID" prop="rwId" style="display: none;">
          <el-col :span="20">
           <el-input v-model="form.rwId"></el-input>
          </el-col>
         </el-form-item>
 
         <el-form-item label="角色ID" prop="roleId">
          <el-col :span="20">
           <el-input v-model="form.roleId"></el-input>
          </el-col>
         </el-form-item>
 
         <el-form-item label="仓库审批权限" prop="requestProcessing">
          <el-col :span="20">
           <el-input v-model="form.requestProcessing"></el-input>
          </el-col>
         </el-form-item>
 
         <el-form-item label="仓库ID" prop="warehouseId">
          <el-col :span="20">
           <el-input v-model="form.warehouseId"></el-input>
          </el-col>
         </el-form-item>
        
       </el-form>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取消</el-button>
         <el-button type="primary" @click="save">确定</el-button>
       </span>
     </el-dialog>

     
 
  </div>
 </template>
 
 <script>
 export default {
   name: "Main",
   data() {
       return {
        roleId:'',
         // 当前选框中的值
         sels: [],
         // 每页多少条
         pageSize:10,
         // 当前页
         pageNum:1,
         name:'',
         vendorName:'',
         selectedRoles:[],
         total:0,
         tableData: [{
          rwId:'',
          roleId:'',
          warehouseId:'',
          warehouseName:'',
          requestProcessing:''
          
         }],
         centerDialogVisible: false,
         
         form:[
          {
            rwId:0,
            roleId:'',
            warehouseId:'', 
            requestProcessing:''
          }
         ],
         
         
         rules: {
          rwId: [
               { required: true, message: '请输入ID', trigger: 'blur' },
              //  { min: 1, max: 5, message: '长度在1到8个字符', trigger: 'blur' },
           ],
           roleId:[
           { required: true, message: '请输入角色ID', trigger: 'blur' },
           ],
           warehouseId:[
           { required: true, message: '请输入仓库ID', trigger: 'blur' },
           ],
           requestProcessing:[
           { required: true, message: '请输入仓库审批权限', trigger: 'blur' },
           ],
           
         },      
       }
     },
    methods:{
     // 重置表单
     resetForm(){
       this.$refs.form.resetFields();
     },
 
     // 获取入库页面数据
     loadPost(){
       this.$axios.get('/api/role_warehouse/list').then(res => {
         console.log(res);
         if(res.data.code == "200"){
           this.tableData = res.data.data
          //  this.total = res.data.data.total
         } 
 
       })
     },
 
     // 重置数据
     reset(){
       this.roleId = ""
       this.loadPost()
     },
 
     // 新增
     add(){
       this.centerDialogVisible = true
       this.$nextTick(() => {
         this.resetForm();
       })
     },
     // 确认关闭模态框
     handleClose(done) {
         this.$confirm('确定关闭模态框吗?')
           .then(_ => {
             done();
           })
           .catch(_ => {});
       },
     // 新增
     doSave(){
       this.$axios.post('/api/role_warehouse/add',this.form).then(res => {
       console.log(res);
       if(res.data.code == "200"){
         this.loadPost();
         this.centerDialogVisible = false
         this.$message({
           message: '新增成功',
           type: 'success'
         })
       } else{
         // alert("失败")
         this.$message({
           message:"新增失败",
           type:"error"
         })
       }
       })
     },
     // 修改
     doMod(){
       this.$axios.post("/api/role_warehouse/update",this.form).then(res => {
         console.log(res);
        if(res.data.code == '200'){
          this.centerDialogVisible = false
          this.loadPost()
          this.$message({
           message: '修改成功',
           type: 'success'
         })
        }else{
          this.$message({
           message:"修改失败",
           type:"error"
         })
        }
       })
     },
    //  save1(){
    //   this.doMod()
    //  },
     // 新增或者修改时时保存
     save(){
       this.$refs.form.validate((valid) => {
           if (valid) {
             if(this.form.rwId){
               // 修改
               this.doMod()
             }else{
               // 新增
               this.doSave();
             }
      
           } else {
             console.log('error submit!!');
             return false;
           }
         });
 
       
     },
 
      // 删除
      handleDelete(id){
       console.log(id);
       this.$axios.delete("/api/role_warehouse/delete/" + id).then(res => {

         console.log(res);
         if(res.data.code == '200'){
           this.$message({
           type:"success",
           message:"删除成功"
         })
         }else{
           this.$message({
           type:"error",
           message:"删除失败"
         })
         }
         this.loadPost()  // 删除之后重新加载表格的数据
 
       })
     },
 
     // 编辑
     mod(row){
       this.centerDialogVisible = true
       
       this.$nextTick(() => {
          // 赋值到表单
          this.form.rwId = row.rwId
          this.form.roleId = row.roleId
          this.form.warehouseId = row.warehouseId
          this.form.requestProcessing = row.requestProcessing
       })
     },
     // loadPost(){
     //   this.$axios.post('/api/in_warehouse/page',{
     //     "name": "扳手",
     //     "pageNo": 1,
     //     "pageSize": 8,
     //     "vendorName": ""
     //   }).then(res => {
     //     console.log(res);
     //   })
     // }

      // 批量删除
     // 获取选中的值
     handleSelectionChange(sels){
      this.sels = sels;
      console.log("选中的值",sels.map((item) => item.userId));
      
     },
     // 批量删除执行操作
     batchDelete(){
      // 删除的提示
      let count = this.sels.length;
      this.$confirm("确认删除这"+ count +"记录吗？","提示",{
        type:"warning"
      }).then(() => {
        // const idList = []
        // for(const v of this.sels){
        //   idList.push(v.id)
        // }
        // console.log(idList);
        let ids = this.sels.map((item) => item.userId)
        console.log(111222);
        // console.log(JSON.stringify(ids));
        console.log(ids);

        // 请求接口
        this.$axios.delete("/api/user/batch_delete/",
        { 
          data: ids, // 将数组数据作为请求体发送 
          headers: { 'Content-Type': 'application/json' } 
        }
        
        ).then(res =>{
          console.log(res);
          if(res.data.code == '200'){
            this.$message({
            message:"批量删除成功",
            type:"success"
          })
          }else{
            this.$message({
              message:"批量删除失败",
              type:"error"
            }).catch((e)=>{
              console.log(e);
            })
          }
          // console.log(1111);/*  */
          this.loadPost()
          // if(res.data.code == '200'){
          //   this.$message({
          //   message: "删除成功",
          //   type: "success"
          // })
          //   this.loadPost()
          // }else{
          //   this.$message({
          //     message:"删除失败",
          //     type:"error"
          //   })
          // }
         
        })
      }).catch((e) =>{
        console.log(e);
      })
     },
      // 设置唯一的row-key
      getRowKeyOfTarget(row) {
      return row.rwId
        },

      // 根据用户id进行查询
      queryData(){
        if(this.roleId == ''){
          this.loadPost()
        }else{
          console.log(this.roleId);
          this.$axios.get("/api/role_warehouse/list/" + this.roleId).then((res) => {
            console.log(11111111111);
            console.log(res);
          if(res.data.code == '200'){
            this.tableData = []
            // 请求成功时将用户信息添加到tableData数组
            this.tableData = res.data.data
          
            this.$message({
              type:"success",
              message:"查询成功"
            })
          }else{
            this.$message({
              type:"error",
              message:"查询失败"
            })
          }
            
        })
        }
        
      },
      getRole(){
        this.$axios.get("/api/role/list"
        ).then((res) =>{
          console.log(res);
          // this.roleOptions.push(res.data.data.roleId)
          this.roleOptions = res.data.data
          this.previousRoles = res.data.data
          console.log(111);
          console.log(this.roleOptions);
        })
      },
      
      getAvatarImageUrl(avatarName) {
      // 假设头像图片存放在 /avatars 目录下
      return `/avatars/${avatarName}`;
    },

     },

      
   beforeMount() {
     this.loadPost()
     console.log(11111111111);
     this.getRole()
   }
 }
 </script>
 
 <style scoped>
    /* 将编辑和删除按钮放在同一行 */
    .action-buttons {
       display: flex;
       align-items: center;
       justify-content: center; /* 让子元素水平居中 */
    }

   .edit-link,
   .delete-link {
       color: #6699CC;
       text-decoration: underline;
       cursor: pointer;
       margin-right: 10px;
   }

   .edit-link:hover,
   .delete-link:hover {
      color: #99CCFF;
   }
 </style>